import { Button, Divider } from "antd";
import Card from "antd/es/card/Card";
import React from "react";
import "./index.css";

function Tip(props) {
  const { content, ONClick } = props;

  function handleOnClick() {
    ONClick();
  }

  return (
    <Card className="tip-container">
      <div className="tip-img"></div>
      <div className="tip-content">
        <div className="tip-title">Congratulations!</div>
        <div style={{ fontSize: "16px" }}>{content}</div>
      </div>
      <div className="tip-footer">
        <Divider className="divider"></Divider>
        <Button className="continue-button" onClick={handleOnClick}>
          CONTINUE
        </Button>
        {/* <div style={{ height: "20px" }}></div> */}
      </div>
    </Card>
  );
}
export default Tip;
